<template>
	<view class = "mine">
		<view class="header">
			<view class="leftdouble" v-if="userInfo">
				<image @tap = "exit" src="../../assets/images/椭圆形.png" mode=""></image>
				<view class="middle">
					<text>祝嘉兴</text>
					<text>阿 祝</text>
				</view>
			</view>
			
			<view class="left" v-else>
				<image @tap = "exit" src="../../assets/images/椭圆形.png" mode=""></image>
				<view class="middle">
					<text>hi~</text>
					<text>你还没有登陆呢</text>
				</view>
			</view>
			
			<view class="right">
				<image src="../../assets/images/setting.png" mode=""></image>
			</view>
		</view>
		
		<view class="login">
			<view class="loginenter">
				<view class="left" @tap = "toLogin">
					登录
				</view>
				<view class="right" @tap = "toEnroll">
					注册
				</view>
			</view>
		</view>
		
		<view class="list">
			<view class="header">
				<text>我的订单</text>
				<view class="imgs">
					<image src="../../assets/images/arr-r-1.png" mode=""></image>
				</view>
			</view>
			<view class="footer">
				<view class="items" @tap="paying(item.id)" v-for= "item in list" :key = "item.id">
					<image :src="item.icon" mode=""></image>
					<text>{{ item.text }}</text>
				</view>
			</view>
		</view>
		
		<view class="minelist">
			<view class="items" >
				<image src="../../assets/images/save.png" mode=""></image>
				<text>收藏</text>
			</view>
			<text>|</text>
			<view class="items" @tap = "brand">
				<image src="../../assets/images/brand.png" mode=""></image>
				<text>品牌</text>
			</view>
			<text>|</text>
			<view class="items" @tap = "article">
				<image src="../../assets/images/article.png" mode=""></image>
				<text>文章</text>
			</view>
			<view class="items" @tap = "address">
				<image src="../../assets/images/address.png" mode=""></image>
				<text>地址</text>
			</view>
			<text>|</text>
			<view class="items" @tap = "card">
				<image src="../../assets/images/card.png" mode=""></image>
				<text>卡包</text>
			</view>
			<text>|</text>
			<view class="items" @tap = "kf">
				<image src="../../assets/images/kf.png" mode=""></image>
				<text>客服</text>
			</view>
			<view class="items" @tap = "security">
				<image src="../../assets/images/security.png" mode=""></image>
				<text>安全</text>
			</view>
			<text>|</text>
			<view class="items" @tap = "shopCar">
				<image src="../../assets/images/about.png" mode=""></image>
				<text>购物车</text>
			</view>
		</view>
	</view>
</template>

<script>
	import mixins from "@/mixins/index.js"
	export default {
		mixins:[mixins],
		data() {
			return {
				userInfo:'',
				list:[
					{
						icon:"/static/images/icon-pay.png",
						text:"待付款",
						id:'0'
					},
					{
						icon:"/static/images/icon-pay.png",
						text:"已付款",
						id:'1'
					},
					{
						icon:"/static/images/icon-car.png",
						text:"待收货",
						id:'2'
					},
					{
						icon:"/static/images/icon-done.png",
						text:"已完成",
						id:'3'
					},
					{
						icon:"/static/images/icon-back.png",
						text:"售后",
						id:'9'
					}
				]
			};
		},
		//必须写在onshow中，直接展示在页面，登陆后进行头部切换。
		onShow(){
			if(uni.getStorageSync("token")){
				this.userInfo = JSON.parse(uni.getStorageSync("token"))
			}
		},
		onLoad(options){
			console.log(this.options);
		},
		methods:{
			shopCar(){
				uni.navigateTo({
					url:"/pages/mine/shopCar/shopCar"
				})
			},
			toLogin(){
				uni.navigateTo({
					url:"/pages/mine/login/login"
				})
			},
			toEnroll(){
				uni.navigateTo({
					url:"/pages/mine/enroll/enroll"
				})
			},
			exit(){
				uni.setStorageSync("token",this.userInfo)
				uni.navigateTo({
					url:"/pages/mine/exit/exit"
				})
			},
			paying(val){
				uni.navigateTo({
					url:`/pages/mine/orderList/orderList/orderList?id=${val}`
				})
			},
			brand(){
				uni.showToast({
					icon:"success",
					image:"/static/images/sorry.png",
					title:"品牌功能未开通"
				})
			},
			article(){
				uni.showToast({
					icon:"success",
					image:"/static/images/sorry.png",
					title:"文章功能未开通"
				})
			},
			card(){
				uni.showToast({
					icon:"success",
					image:"/static/images/sorry.png",
					title:"卡片功能未开通"
				})
			},
			kf(){
				uni.showToast({
					icon:"success",
					image:"/static/images/sorry.png",
					title:"客服功能未开通"
				})
			},
			security(){
				uni.showToast({
					icon:"success",
					image:"/static/images/sorry.png",
					title:"安全功能未开通"
				})
			},
			address(){
				uni.navigateTo({
					url:'/pages/mine/address/address/address'
				})
			}
			
			
			
			
		},
		
	}
</script>

<style lang="scss" scoped>
	.mine{
		width:750rpx;
		height: 100vh;
		background-color: wheat;
		padding:0.01rpx;
		.header{
			width:670rpx;
			height: 150rpx;
			margin: 0 auto;
			display:flex;
			justify-content: space-between;
			margin-top:94rpx;
			.leftdouble{
				width:392rpx;
				height: 150rpx;
				display:flex;
				justify-content: space-evenly;
				align-items:center;
				image{
					width:150rpx;
					height: 150rpx;
					display:block;
				}
				text:nth-child(1){
					display:block;
					font-family: PingFangSC-Semibold;
					font-size: 36rpx;
					color: #3D4C46;
					letter-spacing: 2rpx;
					font-weight:bolder;
				}
			}
			.left{
				width:392rpx;
				height: 150rpx;
				display:flex;
				justify-content: space-between;
				align-items:center;
				image{
					width:150rpx;
					height: 150rpx;
					display:block;
				}
				text:nth-child(1){
					display:block;
					font-family: PingFangSC-Semibold;
					font-size: 28rpx;
					color: #3D4C46;
					letter-spacing: 2rpx;
				}
			}
			.right{
				width:50rpx;
				height: 50rpx;
				image{
					width:100%;
					height: 100%;
				}
			}
		}
		.login{
			width:100%;
			height: 180rpx;
			display:flex;
			justify-content: center;
			align-items:center;
			.loginenter{
				width:424rpx;
				height: 76rpx;
				display:flex;
				justify-content: space-between;
				.left{
					width:182rpx;
					height: 100%;
					border: 2rpx solid #3D4C46;
					border-radius: 10rpx;
					font-family: PingFangSC-Semibold;
					font-size: 30rpx;
					color: #3D4C46;
					letter-spacing: 2.14rpx;
					line-height: 76rpx;
					text-align:center;
					font-weight:bolder;
				}
				.right{
					width:182rpx;
					height: 100%;
					border: 2rpx solid #3D4C46;
					border-radius: 10rpx;
					font-family: PingFangSC-Semibold;
					font-size: 30rpx;
					letter-spacing: 2.14rpx;
					background: #354E44;
					color: #FFFFFF;
					font-weight:bolder;
					line-height: 76rpx;
					text-align:center;
				}
			}
		}
		.list{
			width:670rpx;
			height: 208rpx;
			margin:0 auto;
			background-color: #FFFFFF;
			border-radius: 10px;
			padding:0.01;
			margin-top:-45px;
			.header{
				width:620rpx;
				height: 72rpx;
				border-bottom:1rpx solid #DDDDDD;
				display:flex;
				justify-content:space-between;
				align-items:center;
				margin-bottom:25rpx;
				text{
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #3E3E3E;
					letter-spacing: 1.86rpx;
				}
				.imgs{
					width:16rpx;
					height: 26rpx;
					image{
						width:100%;
						height: 100%;
					}
				}
			}
			.footer{
				width:620rpx;
				display:flex;
				justify-content:space-between;
				margin:0 auto;
				// align-items:center;
				.items{
					width:84rpx;
					image{
						width:45rpx;
						height: 40rpx;
						display: block;
						margin:0 auto;
						margin-bottom:14rpx;
					}
					text{
						width:84rpx;
						height: 37rpx;
						font-family: PingFangSC-Regular;
						font-size: 26rpx;
						color: #3E3E3E;
						letter-spacing: 1.86rpx;
						display: block;
						text-align:center;
					}
				}
			}
		}
		.minelist{
			width:670rpx;
			height: 600rpx;
			border-radius:20px;
			background-color: #FFFFFF;
			margin:40rpx auto 80rpx;
			display:flex;
			align-items:center;
			flex-wrap: wrap;
			.items{
				width:32.5%;
				height: 33%;
				box-sizing: border-box;
				padding-top:40rpx;
				image{
					width:50rpx;
					height: 50rpx;
					display:block;
					margin:0 auto;
					margin-bottom:24rpx;
				}
				text{
					display:block;
					text-align:center;
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #3E3E3E;
					letter-spacing: 1.86rpx;
				}
			}
			text{
				font-weight:100;
			}
		}
	}
</style>
